<template>
  <view class="normal-login-container">
    <!--左侧输入框搜索-->
    <search placeholder="请输入车牌号/车架号" @input="inputChange">

      <view class="flex right20 align-center" slot="right">
        <!--右侧缩略搜索-->
        <uni-icons type="tune" :color="isAllEmpty(queryParams)?'#333':'#1890FF'" @click="handleOpen" size="25"/>
        <!--新增-->
        <uni-icons type="plus-filled" color="#1890FF" size="30" @click="handleToAdd"/>
      </view>
    </search>

    <mescroll-body @init="mescrollInit" @down="downCallback" @up="upCallback">
      <view class="item-wrap" v-for="(item,index) in list" :key="index" @click="goDetail(item)">

        <view class="title-wrap lineBottom10">
          <text>{{ item.vinNo || '' }}</text>
          <text style="color: red">{{ item.overdueDuration || '' }}</text>
        </view>

        <view class="flex-row align-stretch">
          <view v-if="[1,5].includes(Number(item.workOrderStatus))"
                class="flex-row sel-wrap" @click.stop="itemSel(item)">
            <uni-icons color="#1890FF" :type="item.check?'checkbox-filled':'circle'" size="20"></uni-icons>
          </view>
          <view class="flex-col flex1">
            <view class="text-line">
              <text class="text-name">车牌号:</text>
              <text>{{ item.carNo || '' }}</text>
            </view>
            <view class="text-line">
              <text class="text-name">品牌车系车型:</text>
              <text class="text-value">
                {{ item.brandName|filterNull }}/{{ item.seriesName|filterNull }}/{{ item.modelName|filterNull }}
              </text>
            </view>
            <view class="text-line">
              <text class="text-name">车辆产权公司:</text>
              <text class="text-value">{{ item.propertyRightName|filterNull }}</text>
            </view>
            <view class="text-line">
              <text class="text-name">商业险保险公司:</text>
              <text class="text-value">{{ item.insuranceCompany|filterNull }}</text>
            </view>
            <view class="text-line">
              <text class="text-name">商业险到期日:</text>
              <text class="text-value">{{ item.actualEndTime|filterNull }}</text>
            </view>
            <view class="text-line">
              <text class="text-name">商业险总费用:</text>
              <text class="text-value">{{ item.totalAmount|filterNull }}</text>
            </view>
            <view class="text-line">
              <text class="text-name">保险工单编号:</text>
              <text class="text-value">{{ item.workOrderCode|filterNull }}</text>
            </view>
            <view class="text-line">
              <text class="text-name">工单创建时间:</text>
              <text class="text-value">{{ item.createTime|filterNull }}</text>
            </view>
          </view>
        </view>

        <view class="btn-wrap lineTop20">
          <button size="mini" v-if="[1,5].includes(Number(item.workOrderStatus))"
                  @click.stop="handleEdit(item)"
                  type="primary">处理
          </button>
        </view>

      </view>
    </mescroll-body>

    <view class="button-container">
      <view class="flex-row">
        <label class="radio" @click="selAll">
          <uni-icons color="#1890FF" :type="allSel?'checkbox-filled':'circle'" size="20"></uni-icons>
          全选</label>
      </view>

      <button class="btn-item" @click="goBatchAdd">批量处理</button>
    </view>

    <condition-search ref="refConditionSearch" v-model="queryParams" @reset="reset" @confirm="confirm"/>
  </view>
</template>

<script>
import {getCancellationList} from "@/api/cancellation";
import ConditionSearch from "./components/conditionSearch.vue";

export default {
  components: {ConditionSearch},
  data() {
    return {
      list: [],
      carNoVinNo: null,
      queryParams: {
        brandName: "",
        seriesName: "",
        modelName: "",
        workOrderType: "11",
        propertyRightId: "",
        customerName: "",
      },
      allSel: false,
    }
  },
  methods: {
    inputChange(val) {
      this.carNoVinNo = val
    },

    //搜索
    isAllEmpty() {

    },

    itemSel(item) {
      item.check = !item.check;
    },

    selAll() {
      this.allSel = !this.allSel;
      this.list.forEach(item => {
        item.check = this.allSel;
      })
    },

    goBatchAdd() {

    },

    //打开搜索弹框
    handleOpen() {
      this.$refs.refConditionSearch.open()
    },

    //新增
    handleToAdd() {
      let url = `/pages/CarPage/newPage/index?workOrderType=11&title=新增退保`
      this.$tab.navigateTo(url)
    },


    //获取列表
    async upCallback(page) {
      var params = {
        pageNum: page.num,
        pageSize: page.size,
        carNoVinNo: this.carNoVinNo,
        ...this.queryParams,
      }
      try {
        const res = await getCancellationList(params)
        //设置列表数据
        if (page.num === 1) this.list = []; //如果是第一页需手动制空列表
        res.rows.forEach(item => {
          item.check = false
        })
        this.list = this.list.concat(res.rows); //追加新数据
        this.mescroll.endBySize(res.rows.length, res.total);
      } catch (e) {
        //联网失败, 结束加载
        this.mescroll.endErr();
      }
    },

    goDetail(val) {
      let url = `/pages/CarPage/cancellation/add?id=${val.id}&type=view&flowId=${val?.flowId || null}`
      if ([1, 5].includes(Number(val.workOrderStatus))) {
        this.$modal.msg("未处理无法查看详情")
      } else {
        this.$tab.navigateTo(url)
      }
    },

    reset() {
      this.queryParams = {
        brandName: "",
        seriesName: "",
        modelName: "",
        workOrderType: "11",
        startTime: "",
        endTime: "",
        propertyRightId: "",
        procurementReportNumber: "",
      }
      this.mescroll.resetUpScroll()
    },

    confirm(val) {
      this.queryParams = val
      this.mescroll.resetUpScroll()
    },

    handleEdit(val) {
      let url = `/pages/CarPage/cancellation/add?id=${val.id}&type=edit&flowId=${val?.flowId || null}`
      this.$tab.navigateTo(url)
    },
  }
}
</script>

<style lang="scss" scoped>

.radio {
  display: flex;
  align-items: center;
  font-size: 26rpx;
  margin-left: 10rpx;
}

.sel-wrap {
  padding: 0 0 0 10rpx;
}

</style>
